<template>
  <div>
    <page-header :active="active" @done="reload" />
    <page-main @done="reload" />
    <RouterView />
    <page-footer />
  </div>
</template>

<script setup lang="ts">
  import PageFooter from '@/components/PageFooter.vue'
  import PageHeader from '@/components/PageHeader.vue'
  import PageMain from '@/components/PageMain.vue'
  import router from '@/router'
  import { ref, watch } from 'vue'
  import { RouterView } from 'vue-router'

  const active = ref(0)
  const reload = (index: number) => {
    active.value = index
  }

  watch(
    () => active.value,
    (newVal) => {
      switch (newVal) {
        case 0:
          router.replace({
            path: '/index'
          })
          break
        case 1:
          router.replace({
            path: '/map'
          })
          break
        case 2:
          router.replace({
            path: '/note'
          })
          break
        case 3:
          router.replace({
            path: '/about'
          })
          break
      }
    },
    { immediate: true }
  )
</script>

<style scoped></style>
